<template>
  <div>
    <el-dialog v-loading="userTaskListLoading" element-loading-text="拼命加载中"
      title="用户请求详情" :visible.sync="$store.state.userTaskListDialogEditVisible" width="95%" center :before-close="handleCloseUsrTaskListDialog">

      <div style="text-align: center; margin-bottom: 10px">
        <span style="color: blue; margin-right: 5px">服务标定:</span>
        <el-tag :key="tag" v-for="tag in $store.state.userLabels" closable :disable-transitions="false"
          @close="deleteUserLabel(tag)" style="margin-left: 5px">
          {{tag}}
        </el-tag>

        <el-select v-model="selectUserLabelValue" filterable placeholder="请选择服务标定类型"
                   class="select-task-type" @change="selectUserLabel" style="width: 180px">
          <el-option
            v-for="item in selectUserLabelOptions" :key="item.value" :label="item.label" :value="item.value" :disabled="item.disabled">
          </el-option>
        </el-select>

      </div>

      <el-table :data="userTaskList" border stripe class="default-table">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="userId" label="用户ID" width="100">
          <template slot-scope="scope"><p style="color: blue;">{{scope.row.userId}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="userInfo.realName" label="用户姓名" width="80"></el-table-column>
        <el-table-column align="center" prop="userInfo.cell" label="用户手机" width="115"></el-table-column>
        <el-table-column align="center" prop="taskName" label="请求类型" width="100">
          <template slot-scope="scope"><p style="color: #409EFF;">{{scope.row.taskName}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="dayId" label="请求时间" width="90"></el-table-column>
        <el-table-column align="center" prop="taskMessage" label="异常信息"></el-table-column>
        <el-table-column align="center" prop="operateStatus" label="处理状态" width="130">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.operateStatus === 4" size="mini" type="info">无需处理</el-tag>
            <el-select v-else v-model="scope.row.operateStatus" placeholder="处理状态">
              <el-option v-for="item in $store.state.taskOperateStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column align="center" label="业务类型" width="150">
          <template slot-scope="scope">
            <div class="block">
              <el-cascader
                expand-trigger="hover"
                :options="businessTypeOptions"
                v-model="businessTypeValue"
                @change="handleBusinessTypeChange">
              </el-cascader>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="operateor" label="跟踪人" width="120"></el-table-column>
        <el-table-column align="center" prop="operateTime" label="最后处理时间"></el-table-column>
        <el-table-column align="center" prop="operateMessage" label="跟踪结果">
          <template slot-scope="scope" v-if="scope.row.operateStatus !== 4">
            <el-input type="textarea" v-model="scope.row.operateMessage"></el-input>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="status" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="updateUserTask(scope.row)" :disabled="scope.row.operateStatus === 4">更新</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="text-align: center; margin: 2px">
        <el-button v-if="$store.state.showHistoryButton" size="mini" style="color: #1E90FF" @click="showHistory">展开更多记录<i class="el-icon-arrow-down"></i></el-button>
        <el-button v-else size="mini" style="color: #909399" @click="hideHistory">隐藏更多记录<i class="el-icon-arrow-up"></i></el-button>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="clickAffirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapState} from 'vuex';
  import ElForm from "../../../node_modules/element-ui/packages/form/src/form.vue";

  export default {
    components: {ElForm},
    name: 'UserTaskList',
    computed:{
      ...mapState({
        userTaskList: state=>state.userTaskList,
        userTaskListDialogEditVisible: state=>state.userTaskListDialogEditVisible,
        userTaskListLoading: state=>state.userTaskListLoading,
        selectUserLabelOptions: state=>state.selectUserLabelOptions
      })
    },
    data () {
      return {
        selectUserLabelValue: '',

        // 任务业务类型值
        businessTypeValue: [],
        businessTypeOptions: []
      }
    },
    created() {
      this.$$get('/task/business/type/0').then(res => {
        if (this.checkResponse(res)) {
          this.businessTypeOptions = res.data.data;
        }
      })
    },
    methods: {
      handleBusinessTypeChange(value) {
        console.log(value);


      },

      // 查看更多历史记录
      showHistory() {
        if (this.$store.state.userTaskList.length < (this.$store.state.userLabelsHide.length + this.$store.state.userLabelsInit.length)) {
          this.$store.state.userLabelsHide.forEach(item => this.$store.state.userTaskList.push(item));
        }

        this.$store.state.showHistoryButton = this.$store.state.userTaskList.length < (this.$store.state.userLabelsHide.length + this.$store.state.userLabelsInit.length);
      },
      hideHistory() {
        if (this.$store.state.userTaskList.length >= (this.$store.state.userLabelsHide.length + this.$store.state.userLabelsInit.length)) {
          this.$store.state.userTaskList = [];
          this.$store.state.userLabelsInit.forEach(item => this.$store.state.userTaskList.push(item));
        }

        this.$store.state.showHistoryButton = this.$store.state.userTaskList.length < (this.$store.state.userLabelsHide.length + this.$store.state.userLabelsInit.length);
      },

      async selectUserLabel() {
        let labels = this.$store.state.userLabels;
        labels.push(this.selectUserLabelValue);

        let data = await this.$$put('/task/usr/label/' + this.userTaskList[0].userId, {
          label: labels.join(',')
        });
        if (this.checkResponse(data)) {
          this.$message.success('添加标签 ' + this.selectUserLabelValue + ' 成功');
          this.$store.state.selectUserLabelOptions.forEach(item => {
            if (item.label === this.selectUserLabelValue) {
              item.disabled = true;
            }
          });
          this.selectUserLabelValue = '';
          this.$store.state.userLabels = labels;
        }
      },

      async updateUserTask(task) {
        let data = await this.$$put('/task/' + new Date(task.operateTime).getTime(), {
          id: task.id,
          operateStatus: task.operateStatus,
          operateor: task.operateor,
          operateMessage: task.operateMessage
        });
        if (this.checkResponse(data)) {
          this.$message.success('更新成功');
        }
      },

      async deleteUserLabel(label) {
        console.info(label);
        let tags = [];
        this.$store.state.userLabels.forEach(tag => {
          if (tag !== label) {
            tags.push(tag)
          }
        });

        let data = await this.$$put('/task/usr/label/' + this.userTaskList[0].userId, {
          label: tags.join(',')
        });
        if (this.checkResponse(data)) {
          this.$message.success('删除标签 ' + label + ' 成功');
          this.$store.state.selectUserLabelOptions.forEach(item => {
            if (item.label === label) {
              item.disabled = false;
            }
          });

          this.$store.state.userLabels = tags;
        }
      },
      clickCancel() {
        this.$store.state.userTaskListDialogEditVisible = false;
        this.$parent.loadCustomerTaskList2();
      },
      clickAffirm() {
        this.$store.state.userTaskListDialogEditVisible = false;
        this.$parent.loadCustomerTaskList2();
      },
      handleCloseUsrTaskListDialog(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.$parent.loadCustomerTaskList2();
          })
          .catch(_ => {});
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
</style>
